<template>
 <div>

 </div>
</template>
<script>
import Vue from 'vue'
const ToastConstructor = Vue.extend(toast)
let toastTool = []

const getIntance = () => {
  if (toastTool.length > 0) {
    const intance = toastTool[0]
    return intance
  }
  return new ToastConstructor({
    el: document.createElement('div')
  })
}
const removeDom = (e) => {
  if (e.target.parentNode) {
    e.target.parentNode.removeChild(e.target)
  }
}

ToastConstructor.prototype.close = function() {
  this.visible = false
  this.closed = true
  this.$el.addEventListener('transitionend', removeDom) // 执行完毕之后删除dom
  toastTool.push(this)
  console.log(toastTool)
}

const Toast = (options = {}) => {
  const intance = getIntance()
  document.body.appendChild(intance.$el) // 将元素append到页面上
  intance.message = typeof options !== 'object' ? options : options.message || '操作成功'
  intance.duration = options.duration || 3000
  intance.className = options.className || ''
  intance.iconName = options.iconName || ''
  intance.position = options.position || ''
  intance.closed = false
  intance.$el.removeEventListener('transitionend', removeDom)
  clearTimeout(intance.timer)

  Vue.nextTick(function() {
    intance.visible = true

    intance.duration && (intance.timer = setTimeout(function() {
      if (intance.closed) {
        return false
      }
      intance.close()
    }, intance.duration))
  })
  return intance
}
export default Toast 
</script>
<style lang="scss" scoped>

</style>
